<template>
  <div class="main">
    <el-container>
      <el-header class="header" height="64px">
        <main-header @menuStatusChanged="setMenuStatus" />
      </el-header>
      <el-container class="content">
        <el-aside :width="isNarrowWidth ? '64px' : '240px'" class="aside">
          <main-aside ref="menuRef" />
        </el-aside>
        <el-main>
          <div class="tabs-row">
            <tabs class="tabs" />
            <close-icon />
          </div>
          <router-view class="views" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MainHeader from './cpns/main-header/main-header.vue'
import MainAside from './cpns/main-aside/main-aside.vue'
import Tabs from '@/components/tabs/tabs.vue'
import CloseIcon from '@/components/close-icon/close-icon.vue'

// 设置状态决定是否缩小宽度
const isNarrowWidth = ref(false)

// 获取菜单组件实例
const menuRef = ref<InstanceType<typeof MainAside>>()

// 设置菜单是否折叠状态
const setMenuStatus = (isFold: boolean) => {
  isNarrowWidth.value = isFold
  menuRef.value?.setStatus(isFold)
}
</script>

<style scoped lang="less">
.main {
  .header {
    background-color: var(--ly-primary-color);
    padding: 0;
  }

  .content {
    height: calc(100vh - 64px);

    .aside {
      background-color: #ffffff;
      transition: all 0.3s ease;
    }

    .tabs-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tabs {
        flex: 1;
      }
    }
  }

  :deep(.el-menu) {
    border-right: 0;
  }

  .el-aside::-webkit-scrollbar {
    width: 0;
  }
}

.el-main {
  padding: 14px 20px;
  /* 整个滚动条背景 */
}

.views {
  margin-top: 10px;
  background-color: #ffffff;
}

/* 滚动条宽度 */
.el-main::-webkit-scrollbar {
  width: 4px;
}

/* 滚动条颜色 */
.el-main::-webkit-scrollbar-thumb {
  background-color: #abb9c7;
}
</style>
